<template>
  <div class="overgion-page">
    <el-row style="height:100%">
      <el-col :span="24" style="height:9%">
        <div class="item-content flex-content">
          <span>行政区</span>
          <el-cascader :options="options" :props="optionProps" clearable style="margin-left:20px;width: 400px" placeholder="请选择行政区">
            <template slot-scope="{ node, data }">
              <span> {{ data.title }} </span>
            </template>
          </el-cascader>
        </div>
      </el-col>
      <el-col :span="24" style="height:90%;margin-top:1%">
        <el-col :span="12" style="height:49%;padding-right: 5px">
          <el-col :span="24" style="height:20%">
            <div class="item-content" style="display: flex;align-items: center;justify-content: space-around;">
              <div>
                <img src="../../assets/image/指标总数.png" alt="" width="40px">
                <div style="display: inline-block; margin-left: 10px;">
                  <div>指标总数</div>
                  <div><span style="color:blue">88</span>个</div>
                </div>
              </div>
              <div>
                <img src="../../assets/image/基本指标.png" alt="" width="40px">
                <div style="display: inline-block; margin-left: 10px;">
                  <div>基本指标</div>
                  <div><span style="color:blue">88</span>个</div>
                </div>
              </div>
              <div>
                <img src="../../assets/image/约束性指标.png" alt="" width="40px">
                <div style="display: inline-block; margin-left: 10px;">
                  <div>约束性指标</div>
                  <div><span style="color:blue">88</span>个</div>
                </div>
              </div>
              <div>
                <img src="../../assets/image/预期性指标.png" alt="" width="40px">
                <div style="display: inline-block; margin-left: 10px;">
                  <div>预期性指标</div>
                  <div><span style="color:blue">88</span>个</div>
                </div>
              </div>
              <div>
                <img src="../../assets/image/突破指标.png" alt="" width="40px">
                <div style="display: inline-block; margin-left: 10px;">
                  <div>突破指标</div>
                  <div><span style="color:blue">88</span>个</div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="24" style="height:80%;padding-top:10px">
            <div class="item-content">
              <div class="item-header">
                <div>消息</div>
                <div style="color:blue">查看更多 ></div>
              </div>
              <div class="content-body">
                <el-scrollbar style="height:88%" class="hidden-x">
                  <el-timeline>
                    <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
                      {{activity.content}}
                    </el-timeline-item>
                  </el-timeline>
                </el-scrollbar>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="12" style="height:49%;padding-left: 5px">
          <div class="item-content">
            <div class="item-header">
              <div>热门指标趋势变化</div>
              <div style="color:blue">查看更多 ></div>
            </div>
            <div class="content-body">
              <div style="height:20%;display: flex;  align-items: center;">
                <div style="width:20%;padding-left:20px">生态保护红线</div>
                <charts :chartFun="knoChart" style="width:80%"></charts>
              </div>
              <div style="height:20%;display: flex;  align-items: center;">
                <div style="width:20%;padding-left:20px">永久基本农田</div>
                <charts :chartFun="knoChart" style="width:80%"></charts>
              </div>
              <div style="height:20%;display: flex;  align-items: center;">
                <div style="width:20%;padding-left:20px">森林覆盖率</div>
                <charts :chartFun="knoChart" style="width:80%"></charts>
              </div>
              <div style="height:20%;display: flex;  align-items: center;">
                <div style="width:20%;padding-left:20px">河湖水面</div>
                <charts :chartFun="knoChart" style="width:80%"></charts>
              </div>
              <div style="height:20%;display: flex;  align-items: center;">
                <div style="width:20%;padding-left:20px">湿地面积</div>
                <charts :chartFun="knoChart" style="width:80%"></charts>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="15" style="height:48%;margin-top:1%;padding-right: 5px">
          <div class="item-content">
            <div class="item-header">
              <div>指标预警情况</div>
              <div>
                <el-button size="mini">约束性指标</el-button>
                <el-button size="mini">预期性性指标</el-button>
              </div>
            </div>
            <div class="content-body">
              <el-row style="height:100%">
                <el-col :span="11" style="height:100%;padding:0 5px">
                  <el-tabs v-model="activeName" type="card">
                    <el-tab-pane label="突破" name="突破">突破</el-tab-pane>
                    <el-tab-pane label="临界" name="临界">临界</el-tab-pane>
                    <el-tab-pane label="健康" name="健康">健康</el-tab-pane>
                  </el-tabs>
                </el-col>
                <el-col :span="13" style="height:95%">
                  <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="行政区">
                    </el-table-column>
                    <el-table-column prop="name" label="指标">
                    </el-table-column>
                    <el-table-column prop="name" label="预警等级">
                    </el-table-column>
                    <el-table-column prop="name" label="最新更新时间">
                    </el-table-column>
                    <el-table-column prop="name" label="详情">
                    </el-table-column>
                  </el-table>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="9" style="height:48%;margin-top:1%;padding-left: 5px">
          <div class="item-content">
            <div class="item-header">
              <div>监测指标数量</div>
            </div>
            <div class="content-body">
              <charts :chartFun="monitorChart"></charts>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import knoChart from './knob'
import monitorChart from './monitor'

export default {
  data () {
    return {
      map: null,
      OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      activeName: 'aa',
      knoChart: knoChart,
      monitorChart: monitorChart,
      props: { multiple: true },
      options: [],
      optionProps: {
        value: 'idStr',
        label: 'title',
        multiple: true,
        checkStrictly: true
      },
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '创建成功',
        timestamp: '2018-04-11'
      }],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      activeName: '突破'
    };
  },
  mounted () {

  },
  methods: {
    async getTableData () {
      // let res = await this.$get('indexmodelapply/model/getModelList')
      console.log(res)
    },
    async getRegionTree () {
      let rootId = 350100000000
      let res = await this.$get('base/getRegionTree', { rootId })
      if (res.status === 'OK') {
        this.options = res.data
      }
    },

  },
  created () {
    this.getRegionTree()
  }
}
</script>

<style lang="less" scoped>
.overgion-page {
  height: 100%;
  width: 100%;
  .item-content {
    background-color: #fff;
    height: 100%;
    width: 100%;
  }
  .flex-content {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px;
    border-bottom: 1px solid #ccc;
    height: 10%;
  }
  .content-body {
    height: 88%;
    margin: 0 10px;
    margin-top: 1%;
  }
}
</style>